<template>
  <div class="view-data-wrap">
    <el-card class="view-card">
      <ViewData
        v-if="!isEmpty"
        :fields="viewFields"
        :only-custom="false"
        :page-form-model="formModel"
      />
      <el-empty v-if="isEmpty" />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import ViewData from "@/views/form/data/ViewData.vue";
import { onBeforeMount, ref } from "vue";
import { getShareFormDataRequest } from "@/api/project/data";
import { useRoute } from "vue-router";

const viewFields = ref([]);

const formModel = ref({});
const route = useRoute();

const isEmpty = ref(false);

onBeforeMount(() => {
  let keyType = "2";
  if (route.path.indexOf("/p/data/") === -1) {
    keyType = "1";
  }
  getShareFormDataRequest(route.params.key as string, keyType).then(res => {
    if (res.data && res.data.fieldList) {
      formModel.value = res.data.formModal;
      viewFields.value = res.data.fieldList;
    } else {
      isEmpty.value = true;
    }
  });
});
</script>

<style scoped lang="scss">
.view-data-wrap {
  padding: 20px;
}
.view-card {
  width: 900px;
  margin: 0 auto;
}
</style>
